@charset "utf-8";
@import "common/common"; //banner
.banner-box {
    background: #2b80d9;
    margin-top: 52px;
}
@media(min-width:769px) {
    .banner-box {
        min-width: 990px;
    }
}
@media (max-width:769px) {
    div.layaEngine {
        .flash-box {
            background: none;
        }
    }
}
@media (min-width:414px) {
    div.youxi {
        div.goodsDesc {
            margin-right: 9px;
            margin-left: 9px;
        }
    }
    .youshi {
        .goodsDesc {
            width: 289px;
            p {
                margin-bottom: 0;
            }
        }
    }
    div.jiazu {
        padding-top: 100px;
        h3 {
            font-size: 45px;
        }
        img {
            margin-right: 54px;
        }
        .goodsDesc {
            margin-left: 0;
        }
    }
    div.youxi {
        h3 {
            font-size: 27px;
            margin-bottom: 23px;
        }
    }
    .hezuo {
        img {
            display: inline-block;
        }
    }
    .dibu {
        span {
            display: block;
        }
    }
}
@media (max-width:320px) {
    div.layaEngine {
        .flash-box {
            .goodsDesc {
                margin-left: 4px;
            }
            .title1 {
                font-size: 43px;
            }
        }
    }
    div.youxi {
        .goodsDesc {
            margin-right: 5px;
            margin-left: 10px;
        }
        h3 {
            font-size: 20px;
            margin-bottom: 15px;
            display: block;
        }
    }
    div.youshi {
        .title3 {
            font-size: 43px;
        }
        .goodsDesc {
            width: 200px;
        }
    }
    div.jiazu {
        .yi {
            .goodsDesc {
                h5 {
                    text-align: center;
                }
            }
            .img {
                float: none;
                text-align: center;
                img {
                    margin-right: 0;
                }
            }
        }
        h3 {
            font-size: 33px;
        }
    }
    div.dibu {
        span {
            display: block;
        }
        .qu{
            text-align: right;
        }
    }
}
//@media(max-width:375px){
//  div.jiazu{
//     .yi {
//        .img {
//            text-align: left;
//        }
//     }
//    .goodsDesc{
//       h5 {
//           text-align: left;
//       }
//    } 
//  }  
//}
@media(max-width:375px) {
    div.youxi {
        .shipin {
            padding-bottom: 20px;
        }
        h3 {
            font-size: 20px;
            margin-bottom: 15px;
            display: block;
        }
        .goodsDesc {
            margin-left: 4px;
            margin-right: 4px;
        }
    }
    div.youshi {
        .goodsDesc {
            width: 200px;
        }
    }
    div.jiazu {
        h3 {
            font-size: 40px;
        }
        .yi {
            .goodsDesc {
                width: auto;
                h5 {
                    text-align: center;
                    display: block;
                }
                p {
                    display: block;
                }
            }
            .img {
                float: none;
                text-align: center;
                img {
                    margin-right: 0;
                }
            }
        }
    }
    div.dibu{
        .qu{
            text-align: right;
        }
    }
}
@media(max-width:1024px){
    div.youxi{
      div.goodsDesc{
          margin-left: 8px;
          margin-right: 8px;
      }  
    } 
}
//laya
.layaEngine {
    background: #fbfaf7;
    .flash-box {
        background: url("../img/bg.jpg") no-repeat;
        background-position: right bottom;
        padding-bottom: 100px;
        background-color: #fbfaf7;
        .donghua{
            .img{
                  width: 64px;
                height: 64px;
                line-height: 64px;
                border-radius: 6px;
                background: #0078d7;
                overflow: hidden;
                text-align: center;
                 transform: rotate(0);
                transition: 1s;
            }
            .img:hover{
                transform: rotate(360deg);
                transition: 1s;
                background: #cccccc;
            }
        }
        .title1 {
            font-size: 48px;
            color: #0078d7;
            line-height: 48px;
            margin-top: 108px;
        }
        .title2 {
            font-size: 30px;
            color: #666666;
            margin-top: 33px;
            margin-bottom: 77px;
        }
        .goodsDesc {
            width: 222px;
            margin-left: 12px;
            h5 {
                font-size: 20px;
                line-height: 34px;
                margin-bottom: 0;
            }
            p {
                font-size: 14px;
                color: #666666;
                line-height: 24px;
            }
        }
    }
}
@media (max-width:768px) {
    .flash-box {
        background: none;
    }
}
.layabox {
    margin-top: 115px;
    .title3 {
        font-size: 48px;
        color: #8fc31f;
        margin-bottom: 44px;
    }
    .lb {
        margin-top: 66px;
    }
    .youshi {
        background-position: right bottom;
        .xia {
            margin-bottom: 14px;
            .tu {
                vertical-align: middle;
                display: inline-block;
            }
            .goodsDesc {
                vertical-align: middle;
                display: inline-block;
                p {
                    font-size: 14px;
                    color: #666666;
                }
            }
        }
    }
}
.jiazu {
    background: #0079d7;
    margin-bottom: 86px;
    h3 {
        color: white;
        font-size: 48px;
        text-align: center;
        margin-bottom: 73px;
    }
    img {
        margin-right: 60px;
    }
    .goodsDesc {
        width: 222px;
        margin-left: 12px;
        h5 {
            font-size: 33px;
            line-height: 34px;
            margin-bottom: 0;
            color: white;
        }
        p {
            font-size: 14px;
            color: white;
            line-height: 24px;
            margin-top: 17px;
        }
    }
    .yi {
        margin-bottom: 80px;
        clear: both;
        .img {
            float: left;
            
        }
    }
}
.youxi {
    h3 {
        font-size: 35px;
        display: inline-block;
        margin-bottom: 50px;
    }
    h5 {
        font-size: 14px;
        display: inline-block;
        float: right;
    }
    .shipin {
//      margin-right: 50px;
    }
    .goodsDesc {
        width: 67px;
        text-align: center;
        display: inline-block;
        margin-right: 21px;
        margin-bottom: 25px;
    }
}
.hezuo {
    background: #f4f4f4;
    h3 {
        font-size: 30px;
        display: inline-block;
    }
    p {
        font-size: 12px;
        display: inline-block;
        color: #7f7f7f;
        margin-bottom: 32px;
    }
    .tu {
        border: 1px solid #dddddd;
        width: 150px;
        border-radius: 1px;
        margin-bottom: 20px;
    }
}
.dibu {
    background: #3b3b3b;
    padding-bottom: 37px;
    p {
        color: #a1a3ab;
        font-size: 14px;
        display: inline-block;
        margin-bottom: 0;
        margin-top: 35px;
    }
    span {
        font-size: 12px;
        color: #a1a3ab;
    }
    .qu {
        margin-top: 38px;
        .xin {
            display: inline-block;
            position: relative;
            .er {
                position: absolute;
                top: -150px;
                left: -50px;
                width: 142px;
                height: 150px;
                display: none;
            }
        }
        .xin:hover .er {
            display: block;
        }
        .wechat {
            display: inline-block;
            position: relative;
            .er {
                position: absolute;
                top: -150px;
                left: -50px;
                width: 142px;
                height: 150px;
                display: none;
            }
        }
        .wechat:hover .er {
            display: block;
        }
        .qq {
            display: inline-block;
            position: relative;
            .er {
                position: absolute;
                top: -150px;
                left: -50px;
                width: 142px;
                height: 150px;
                display: none;
            }
        }
        .qq:hover .er {
            display: block;
        }
    }
}